<template>
  <div id="order-group-page" v-if="orderGroup.id>0">
    <div class="page-title" :style="{top:(this.getSafeArea().top-4)+'px'}">
      <div id="back-button" @click="$router.push('/OrderDetail?id='+$route.query.id)">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>团购详情</span>
    </div>

    <div style="position: relative; overflow-x: hidden; overflow-y: auto;" :style="{
      height:(this.getWinSize().height-this.getSafeArea().top-40)+'px',
      top:(this.getSafeArea().top+40)+'px'
    }">

      <!--商品信息-->
      <div class="product-box">
        <div class="image">
          <img :src="orderGroup.productImage"/>
        </div>
        <div class="right">
          <div class="name">
            <span class="ovd_s" v-text="orderGroup.productName"></span>
          </div>
          <div class="model-nums">
            <span class="model" v-text="'型号:'+orderGroup.productModel"></span>
            <!--          <span class="nums" v-text="'购买数量: 1'"></span>-->
          </div>
          <div class="price">
            <span v-text="'￥'+ToMoney(orderGroup.productPrice)"></span>
          </div>
        </div>
        <div class="c"></div>
      </div>

      <div id="group-box">
        <div class="title-box">
          <div class="title">参与列表</div>
          <div class="status">
            <span v-text="orderGroup.status.name"></span>
          </div>
        </div>

        <!--已参团用户-->
        <div id="join-user-box">
          <div class="item" v-for="(user,index) in orderGroup.joinOrderData" :key="index">
            <div class="icon">
              <i class="order-group-manager" v-if="user.isManager"></i>
              <img :src="user.memberIcon"/>
            </div>
            <span class="nickname ovd_s" v-text="user.memberNickname"></span>
          </div>
          <div class="item" v-for="n in orderGroup.groupNums-orderGroup.joinOrderData.length">
            <div class="icon">
              <span><i class="el-icon-plus"></i></span>
            </div>
            <span class="nickname">待参与</span>
          </div>
          <div class="c"></div>
        </div>

        <div class="success-box" v-if="orderGroup.status.id===2">
          <div class="icon"></div>
          <p class="title">拼团成功!</p>
        </div>

        <!--团购-描述信息-->
        <div class="info-box" v-if="orderGroup.joinOrderData.length!==orderGroup.groupNums">
          <div class="rows">
            <span class="red" v-text="orderGroup.joinOrderData.length"></span>人成团,还差 <span class="red" v-text="orderGroup.groupNums-orderGroup.joinOrderData.length"></span> 人
          </div>
          <div class="rows" v-if="orderGroup.status.id===1">成团剩余时间</div>
          <div class="rows" v-if="orderGroup.status.id===1">
            <!--          <span class="cutdown-font" v-text="coutDown.hour"></span>:<span class="cutdown-font" v-text="coutDown.minute"></span>:<span class="cutdown-font" v-text="coutDown.second"></span>-->
            <cutdown-box :curr-seconds-params="orderGroup.endTimeSeconds"/>
          </div>
          <div class="row" style="padding-top: 20px;">
            参团邀请码: <span v-text="orderGroup.invitationCode"></span> <el-button size="mini" @click="copyClipBoard(orderGroup.invitationCode)">复制</el-button>
          </div>
          <div class="row">
            <div class="qr-box">
              <!--            <img :src="orderGroup.qrCodeImageUrl">-->
              <canvas ref="canvasId" id="canvasId" :style="{'width':qrCodeStyle.width, 'height':qrCodeStyle.height}"></canvas>
            </div>
          </div>
        </div>

      </div>

      <!--注意事项-->
      <div class="tip-box">
        <div class="row">1.开团后48小时内无法成团自动解散拼团</div>
        <div class="row">2.开团成功后,团员不能自主取消订单,需要联系商家取消</div>
        <div class="row">3.未成团前,团长取消订单,所有团员团购订单自动联动取消</div>
      </div>

    </div>

  </div>
</template>

<script>
import CutdownBox from '../common/CutdownBox'
import QRCode from 'qrcode'
export default {
  name: 'OrderGroup',
  components: {CutdownBox},
  data:function () {
    return {
      timer:null,
      qrCodeStyle:{
        width:180,
        height:180,
      },
      orderGroup:{
        "id": 0,
        "orderNo": "202209140644094072",
        "memberId": 6,
        "memberUsername": "15200000019",
        "memberIcon": "http://image.yangfankj.com/icon/18.png",
        "memberNickname": "冰箱少男",
        "shopId": 7,
        "shopLogo": "http://image.yangfankj.com/shop/logo/7.jpg",
        "shopName": "唐久便利",
        "productId": 21,
        "productName": "干露红魔鬼 红葡萄酒",
        "productImage": "http://image.yangfankj.com/product/7/1/0.png",
        "productPrice": 88,
        "productModel": "常规",
        "groupNums": 5,
        "currNums": 1,
        "endTime": 171144,
        "joinOrderData": [
          {
            "memberUsername": "15200000019",
            "memberIcon": "http://image.yangfankj.com/icon/18.png",
            "memberNickname": "冰箱少男",
            "memberId": 6
          }
        ],
        "invitationCode": "945341",
        "status": {
          "name": "拼团中",
          "id": 1
        },
        "createdTime": "2022-09-14 06:44:09"
      }
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  mounted () {
    this.getDetail()
    let $this=this
    $this.timer=setInterval(function () {
      $this.getDetail()
    },60000)
  },
  methods:{
    // 获取-团购详情
    getDetail:function () {
      let $this=this
      $this.MyRequest($this.ApiDoNameMember+'Order/groupDetail',{id:$this.$route.query.id},function (data) {
        $this.orderGroup=data
        $this.$forceUpdate()
        setTimeout(function () {
          var qrData={
            event:"JoinGroupOrder",
            orderNo:data.orderNo,
            invitationCode:data.invitationCode,
          }
          QRCode.toCanvas(
            $this.$refs.canvasId,
            JSON.stringify(qrData),
            { width:$this.qrCodeStyle.width, height:$this.qrCodeStyle.height, toSJISFunc: QRCode.toSJIS },
            error => {}
          );
        },500)
      })
    }
  }
}
</script>

<style scoped>

</style>
